<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				<span>邀请成员加入活动</span>
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form">
					<!-- <a-form-item label="选择成员" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
						<a-select :allowClear="true" v-decorator="['userNo',{ rules: [{ required: true, message: '请选择学生组织成员' }] }]">
							<a-select-option v-for="(item, index) in memberList" :key="index" :value="item.UserNo">{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-item> -->
					<a-form-item label="类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
						<a-radio-group v-decorator="['Type', { rules: [{ required: true, message: '请输选择类型' }] }]" name="radioGroup">
							<a-radio v-for="(item, i) in ActivityMemberTypeList" :key="i" :value="item.Key">{{ item.Value }}</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label="选择成员" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
						<a-select
							showSearch
							optionFilterProp="children"
							style="width: 100%"
							placeholder="请输入学号进行搜索"
							v-decorator="['userNo', { rules: [{ required: true, message: '请选择学生组织成员' }] }]"
							@search="fetchUser"
							:filterOption="filterOption"
						>
							<a-spin v-if="fetching" slot="notFoundContent" size="small" />
							<a-select-option v-for="(item, index) in userList" :key="item.UserNo">{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">提交</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>
<script>
import Cache from '@/utils/cache';
import { DoInviteUserJoinActivity, GetUserClubMember, GetUserList, DoGetActivityMemberTypeListCommon } from '@/api/follow';
export default {
	props: {
		ID: String,
		ClubID: String,
		time: null
	},
	watch: {
		time: {
			handler(text) {
				// this.GetUserClubMemberList()
				this.getOtherList();
			},
			immediate: true
		}
	},
	data() {
		return {
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			memberList: [],
			fetching: false,
			userList: [],
			ActivityMemberTypeList: []
		};
	},
	async created() {
		// await this.GetConfirmState()
	},
	methods: {
		async getOtherList() {
			let res = await DoGetActivityMemberTypeListCommon();
			this.ActivityMemberTypeList = res.data.data;
		},
		async fetchUser(value) {
			this.fetching = true;
			let myReg = /^[^a-zA-Z]+$/;
			if (value && value.length > 1) {
				let data = {};
				data.userNo = value;
				// data.type = 1
				data.top = 1;
				let res = await GetUserList(data);
				this.fetching = false;
				this.userList = res.data.data;
			}
		},
		async GetUserClubMemberList() {
			let data = {};
			data.clubID = this.ClubID;
			let res = await GetUserClubMember(data);
			this.memberList = res.data.data;
		},
		radioOnChange(e) {},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		closeFunction(data) {
			this.form.resetFields();
			this.$emit('closeFun', data);
		},
		roleChange(value) {},
		departmentChange(value) {},
		handleSubmit(e) {
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = {};
					data = values;
					data.activityID = this.ID;
					let res = await DoInviteUserJoinActivity(data);
					if (res.data.code === 0) {
						this.$message.success(res.data.msg);
						this.closeFunction(1);
						this.form.resetFields();
					} else {
						this.$message.error(res.data.msg);
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 80px;
}
</style>
